<template>
  <div class="divLocationView">
    <div class="divLocationViewCondition">
      <div class="divTitle">库区选择</div>
      <el-select v-model="WarehouseListValue" placeholder="请选择">
        <el-option v-for="item in WarehouseListOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
      </el-select>
      <div class="divAreaContent">
        <div class="divAreaCondition">
          <el-input placeholder="请输入库区名称" suffix-icon="el-icon-search" v-model="areaValue"> </el-input>
        </div>
        <div class="divAreaDetails">
          <template v-if="areaList.length">
            <div v-for="item in areaList" @click="setCurrentAreaId(item.id)" :key="item.id" :class="['divAreaItem', { itemActive: currentAreaId === item.id }]">{{ item.name }}</div>
          </template>
          <template v-else>
            <div class="divNoArea">
              <div class="divFontDisplay">暂无库区</div>
              <button class="importantButton" @click="$router.push('/ManageBaseInfo/WareArea/details/null')">新增库区</button>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="divDivision"></div>
    <div class="divLocationViewDisplay">
      <div class="divTop">
        <div class="divTitle">库区总览</div>
        <div class="divOverView">
          <div class="divItem">
            <span class="spanLabel">库存总计:</span>
            <span>{{ AreaOverview.total }}</span>
          </div>
          <div class="divItem">
            <div class="divSquare" style="background-color: rgb(195, 195, 195); width: 12px; height: 12px; border-radius: 3px"></div>
            <span class="spanLabel">停用库位:</span>
            <span>{{ AreaOverview.stop }}</span>
          </div>
          <div class="divItem">
            <div class="divSquare" style="background-color: rgb(0, 190, 118); width: 12px; height: 12px; border-radius: 3px"></div>
            <span class="spanLabel">占用库位:</span>
            <span>{{ AreaOverview.use }}</span>
          </div>
          <div class="divItem">
            <div class="divSquare" style="background-color: rgb(178, 220, 204); width: 12px; height: 12px; border-radius: 3px"></div>
            <span class="spanLabel">空闲库位:</span>
            <span>{{ AreaOverview.free }}</span>
          </div>
        </div>
      </div>
      <div class="divContent">
        <template v-if="LocationListDetail.length">
          <el-popover v-for="item in LocationListDetail" :key="item.id" placement="bottom" width="180" trigger="hover">
            <div class="contentList">
              <span class="spanLeft">库位编号:</span>
              <span class="spanRight">&nbsp;{{ item.code }}</span>
              <br />
              <span class="spanLeft">库位名称:</span>
              <span class="spanRight">&nbsp;{{ item.name }}</span>
              <br />
              <span class="spanLeft">库位位置:</span>
              <span class="spanRight">&nbsp;{{ item.locationRow }}排{{ item.locationColumn }}列{{ item.locationLayer }}层</span>
              <br />
              <span class="spanLeft">库位状态:</span>
              <span class="spanRight">&nbsp;{{ item.status ? '启用' : '停用' }}</span>
              <br />
              <span class="spanLeft">货品名称: </span>
              <span class="spanRight">&nbsp;{{ item.goodsName }}</span>
              <br />
              <span class="spanLeft">货品数量:</span>
              <span class="spanRight">&nbsp;{{ item.goodsTotal }}</span>
            </div>
            <div slot="reference" :class="['divSquare', { divFree: item.useStatus === 0 && item.status === 1, divUse: (item.useStatus === 2 || item.useStatus === 1) && item.status === 1 }]" style="background-color: rgb(195, 195, 195); width: 36px; height: 36px; border-radius: 7px"></div>
          </el-popover>
        </template>
        <template v-else>
          <div class="emptyTip">
            <span class="imgIcon"></span>
            <p>暂无库位</p>
            <el-button round @click="$router.push('/ManageBaseInfo/WareLocation/details/null')">新增库位</el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getWarehouseList, getAreaList, getAreaOverview, getLocationListDetail } from '@/api/ManageBaseInfo'
export default {
  data () {
    return {
      WarehouseListOptions: [],
      WarehouseListValue: '',
      areaValue: '',
      areaList: [],
      currentAreaId: '',
      AreaOverview: {},
      LocationListDetail: []
    }
  },
  methods: {
    async getWarehouseList () {
      const resWarehouse = await getWarehouseList({ status: 1 })
      this.WarehouseListOptions = resWarehouse.data
      this.WarehouseListValue = this.WarehouseListOptions[0].id
    },
    async setCurrentAreaId (id) {
      this.currentAreaId = id
    }
  },
  watch: {
    async WarehouseListValue (newVal, oldVal) {
      const resArea = await getAreaList({ warehouseId: newVal })
      this.areaList = resArea.data
      this.currentAreaId = this.areaList[0].id
    },
    async currentAreaId (newVal, oldVal) {
      const res = await getAreaOverview(newVal)
      this.AreaOverview = res.data
      console.log(this.AreaOverview)
      const { data } = await getLocationListDetail({ areaId: newVal })
      this.LocationListDetail = data
      console.log(this.LocationListDetail)
    },
    async areaValue (newVal, oldVal) {
      const resArea = await getAreaList({ warehouseId: this.WarehouseListValue, like_name: newVal, status: 1 })
      this.areaList = resArea.data
      this.currentAreaId = this.areaList[0].id
    }
  },
  created () {
    this.getWarehouseList()
  }
}
</script>

<style lang="less" scoped>
.divLocationView {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  height: calc(100vh - 114px);
  .divDivision {
    float: left;
    width: 10px;
    height: 100%;
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 0), rgba(99, 97, 96, 0.1));
  }
  .divLocationViewCondition {
    box-sizing: border-box;
    width: 263px;
    padding: 27px 19px 27px 20px;
    float: left;
    .divTitle {
      width: 64px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #332929;
      line-height: 22px;
      margin-bottom: 22px;
      margin-left: 10px;
    }
    /deep/ .el-input__inner {
      height: 40px;
      line-height: 40px;
      border: 1px solid #f8f5f5;
      background: #f8f5f5;
      border-radius: 6px;
      margin-bottom: 21px;
      .divAreaCondition {
        height: 65%;
      }
    }
    .divAreaContent {
      box-sizing: border-box;
      width: 217px;
      height: 100%;
      background: #fdfcf9;
      border: 1px solid #f7f2f1;
      border-radius: 6px;
      padding: 30px 29px 0 26px;
      .divAreaCondition {
        margin-bottom: 10px;
        .el-input__icon {
          height: 65%;
        }
      }
      .divAreaDetails {
        height: calc(100vh - 360px);
        position: relative;
        .divAreaItem {
          width: 140px;
          height: 40px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
          margin: 0 auto;
          margin-top: 20px;
          font-size: 13px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: center;
          color: #ffb200;
          line-height: 40px;
          cursor: pointer;
        }
        .itemActive {
          background: #ffb200;
          color: #332929;
        }
        .divNoArea {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          .divFontDisplay {
            width: 56px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #b5abab;
            line-height: 20px;
            margin: 0 auto;
            margin-bottom: 19px;
          }
          .importantButton {
            width: 126px;
            background: #00be76;
            color: #fff;
            height: 40px;
            border-radius: 20px;
            border: 0;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            line-height: 40px;
            padding-left: 26px;
            padding-right: 26px;
            cursor: pointer;
            outline: 0;
          }
        }
      }
    }
  }
  .divLocationViewDisplay {
    box-sizing: border-box;
    padding: 27px 19px 27px 20px;
    float: left;
    height: 100%;
    width: calc(100% - 273px);
    .divTop {
      margin-bottom: 21px;
      height: 22px;
      .divTitle {
        width: 64px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #332929;
        line-height: 22px;
        float: left;
        margin-right: 103px;
      }
      .divOverView {
        float: left;
        .divItem {
          float: left;
          margin-right: 43px;
          span {
            height: 22px;
            line-height: 22px;
          }
          .spanLabel {
            float: left;
            margin-right: 4px;
            width: 70px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #424250;
          }
          .divSquare {
            float: left;
            margin-top: 5px;
            margin-right: 7px;
          }
        }
      }
    }
    .divContent {
      width: 100%;
      height: calc(100% - 43px);
      overflow-y: auto;
      .divSquare {
        float: left;
        margin-top: 5px;
        margin-right: 7px;
        margin-left: 7px;
      }
      .divSquare:hover {
        border: rgb(127, 127, 127) solid 2px;
      }
      .divUse:hover {
        border: rgb(0, 138, 86) solid 2px;
      }
      .divFree:hover {
        border: RGB(0, 190, 118) solid 2px;
      }
      .divUse {
        background-color: rgb(0, 190, 118) !important;
      }
      .divFree {
        background-color: rgb(178, 220, 204) !important;
      }
      .emptyTip {
        border-top: 1px solid #f5efee;
        padding: 100px 0;
        margin: 0 auto;
        color: #b5abab;
        font-size: 14px;
        text-align: center;
        .imgIcon {
          width: 160px;
          height: 160px;
          display: inline-block;
          background: url(http://www-wms-java.itheima.net/img/empty.4300e933.png) no-repeat;
          background-size: contain;
        }
        .el-button {
          background: #00be76;
          color: #fff;
        }
      }
    }
  }
  /deep/ .el-input__icon {
    height: 65%;
  }
}
</style>
